import {Component, OnInit} from '@angular/core';
import {Stock, StockService} from "../stock.service";
import {ActivatedRoute, Router} from "@angular/router";
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {element} from "protractor";

@Component({
    selector: 'app-stock-form',
    templateUrl: './stock-form.component.html',
    styleUrls: ['./stock-form.component.css']
})
export class StockFormComponent implements OnInit {

    // private stock: Stock;

    stock:Stock = new Stock(0,"",0,0,"",[]);

    formModel: FormGroup;

    categories = ["IT", "互联网", "金融"];

    constructor(private routeInfo: ActivatedRoute, private stockService: StockService, private router: Router) {

    }

    ngOnInit() {
       let stockId = this.routeInfo.snapshot.params['id'];

        // this.stock =
        let fb = new FormBuilder();

        this.formModel = fb.group({
                name: [this.stock.name, [Validators.required, Validators.minLength(3)]],
                price: [this.stock.price, Validators.required],
                desc: [this.stock.desc, Validators.required],
                categories: fb.array([
                    new FormControl(this.stock.categories.indexOf(this.categories[0]) != -1),
                    new FormControl(this.stock.categories.indexOf(this.categories[1]) != -1),
                    new FormControl(this.stock.categories.indexOf(this.categories[2]) != -1)
                ],this.categoriesSelectValidator)
            }
        );

        this.stockService.getStock(stockId).subscribe(
            data =>{
                this.stock = data
                this.formModel.reset({
                    name:data.name,
                    price:data.price,
                    desc:data.desc,
                    categories:[
                        data.categories.indexOf(this.categories[0]) != -1,
                        data.categories.indexOf(this.categories[1]) != -1,
                        data.categories.indexOf(this.categories[2]) != -1,
                    ]
                });
            }
        );
    }

    categoriesSelectValidator(control:FormArray){
        var valid = false;

        control.controls.forEach(control =>{
            if(control.value){
                valid = true;
            }
        });

        if(valid){
            return null;
        }else{
            return {categoriesLength:true};
        }
    }

    cancle(){
        this.router.navigateByUrl('/stock');
    }

    save() {
        var chineseCategories = [];
        var index = 0;
        for(var i=0; i<3; i++){
            if(this.formModel.value.categories[i]){
                chineseCategories[index++] = this.categories[i];
            }
        }
        this.formModel.value.categories = chineseCategories;
        this.formModel.value.rating = this.stock.rating;

        console.group(this.formModel.value);
        console.log(this.stock.rating);
        // this.router.navigateByUrl('/stock');
    }

}
